<template>
	<!-- <a-typography-paragraph strong>
			<blockquote>
				{{ item.title }}
			</blockquote> -->
	<!-- </a-typography-paragraph> -->
	<vxe-table :data="tableData" v-bind="billTableOption" class="bill-preview-table">
		<vxe-column title="状态" min-width="100" align="center">
			<template #default="{row}">
				<a-tag :color="row.billStatus == 1 ? row.isIncome? 'processing' : 'error' : 'success' ">{{ billStatusDesc(row) }} </a-tag>


				</template>
		</vxe-column>
		<vxe-column title="账单周期" min-width="260" align="center">
			<template #default="{row}">{{ format(row.beginTime) }}至{{ format(row.endTime) }}</template>
		</vxe-column>
		<vxe-column title="应收(付)/已收(付)" min-width="160" align="right">
			<template #default="{row}">{{ row.totalMoney }}元/{{ row.occurredMoney }}元</template>
		</vxe-column>
		<vxe-column field="predictTime" title="收支时间" min-width="100" align="right">
			<template #default="{row}">{{  format(row.predictTime) }}</template>
		</vxe-column>
		<vxe-column title="操作" width="150" align="center">
			<template #default="{row}">
				<a @click="linkToSubBill(row)">详情</a>
				<template v-if="row.billStatus === 1">
					<a-divider type="vertical" />
					<a @click="handleBatch(row)">处理</a>
				</template>
			</template>
		</vxe-column>
	</vxe-table>
	<!-- 批量处理 -->
	<batch-handle-dialog
		v-bind="batchConfig"
		v-model:visible="batchConfig.visible"
		:bills="batchConfig.bills"
		@close="fetchData()" />
</template>

<script lang="ts" setup>
	import {getTotalBillById} from '@/api/charter-contract'
	import {reactive, watch, ref} from 'vue'
	import {VxeTableProps} from 'vxe-table'
	import Dayjs from 'dayjs'
	import BatchHandleDialog from '@/components/finance/dialog/batch-handle-dialog.vue'

	const props = defineProps<{
		enterContractId: string
		loading: boolean
	}>()

	const batchConfig = ref({
		visible: false,
		bills: [],
		extraParams: {}
	})
	const emit = defineEmits(['update:loading', 'changeParams'])
	const billTableOption = reactive<VxeTableProps>({
		size: 'medium',
		rowConfig: {
			isHover: true
		},
		expandConfig: {
			trigger: 'row',
			showIcon: false
		}
	})
	const billStatusDesc = row => {
		const {isIncome, billStatus} = row

		const strategyCombiner = {
			strategies: [
				params => (params.isIncome && params.billStatus === 1 ? '待收款' : null),
				params => (!params.isIncome && params.billStatus === 1 ? '待付款' : null),
				params => (params.billStatus === 2 ? '已结清' : null)
			],
			execute: function (params) {
				for (let strategy of this.strategies) {
					const result = strategy(params)
					console.log(result);

					if (result !== null) {
						return result
					}
				}
				return null // 默认情况
			}
		}
		return strategyCombiner.execute(row)
	}
	const loading = ref(true)
	const tableData = ref([{}])
	const fetchData = async () => {
		// fetch
		try {
			loading.value = true
			emit('update:loading', true)
			const res = await getTotalBillById(props.enterContractId)
			const {data} = res

			// const getTime = date => new Date(date).getTime()
			tableData.value = data
				// .map(e => {
				// 	const {isIncome,title} = e
				// 	return e.billInfos.map(i=>({...i,isIncome,title}))
				// })
				// .flat()
				// .sort((a, b) => getTime(a.beginTime) > getTime(b.beginTime))
		} catch (error) {
			loading.value = false
			emit('update:loading', false)
		}
	}

	watch(
		() => props.enterContractId,
		val => {
			fetchData()
		},
		{
			immediate: true
		}
	)
	const linkToSubBill = row => {
		const {id,predictTime, beginTime, endTime, allSubBillIds} = row
		emit('changeParams', {beginTime, endTime, predictTimeEnd: predictTime, predictTimeStart: predictTime, keyIdList: allSubBillIds})
		// mock
	}
	const handleBatch = row => {
		batchConfig.value = {
			visible: true,
			bills: row.unclosedBillIds,
			extraParams: row
		}
	}
	const format = date => Dayjs(date).format('YYYY-MM-DD')
	defineExpose({})
</script>
